<template>
  <view>
    <!-- 地址信息 -->
    <my-address-edit v-if="addressEditShow"></my-address-edit>
    <view class="user-info" v-if="!formShow&&!addressEditShow">
      <!-- 顶部-头像 区域 -->
      <view class="my-top">
        <image :src="userinfo.avatarUrl" class="my-head-pic" @click="changeAvatar">
        </image>
        <view class="my-message">
          <view class="my-name text-lg">{{userinfo.user_name}}</view>
          <view class="my-phone text-df">
            手机号：{{userinfo.user_phone || ''}}
          </view>
        </view>
        <button class="my-message-edit cu-btn round bg-gray shadow" @click="editUserInfoShow">编辑资料</button>
      </view>
      <!-- 余额 代金券 认证区域 -->
      <view class="my-main">
        <view class="my-balance-cash-coupon-authenticate">
          <image src="../../static/icon-my/yue.png" class="my-pic"></image>
          <text>余额</text>
        </view>
        <view class="my-balance-cash-coupon-authenticate">
          <image src="../../static/icon-my/voucher.png" class="my-pic"></image>
          <text>代金券</text>
        </view>
        <view class="my-balance-cash-coupon-authenticate" @click="goToRunner">
          <image src="../../static/icon-my/renzheng.png" class="my-pic"></image>
          <text>认证</text>
        </view>
      </view>

      <!-- 我的订单区域 -->
      <view class="cu-list menu sm-border card-menu my-order">
        <!-- 我的订单 -->
        <view class="cu-item arrow" @click="gotoMyOrder">
          <view class="content">
            <text class="cuIcon-cartfill text-orange"></text>
            <text class="text-grey">我的订单</text>
          </view>
        </view>

        <!--地址管理 -->
        <view class="cu-item arrow" @click="editAddress">
          <view class="content">
            <text class="cuIcon-locationfill text-olive"></text>
            <text class="text-grey">地址管理</text>
          </view>
        </view>
        <!-- 头像组 -->
        <view class="cu-item arrow" @click="customerService">
          <view class="content">
            <text class="cuIcon-commentfill text-pink"></text>
            <text class="text-grey">客服</text>
          </view>

        </view>

        <!-- 版本更新 -->
        <!--        <view class="cu-item">
          <view class="content">
            <text class="cuIcon-pullup text-green"></text>
            <text class="text-grey">版本更新</text>
          </view>
          <view class="action">
            <button class="cu-btn round bg-green shadow" @click="gotoMap">
              <text class="cuIcon-upload"></text> 上传</button>
          </view>
        </view> -->

        <!-- 清理缓存 -->
        <!-- <view class="cu-item">
          <view class="content">
            <text class="cuIcon-warn text-orange"></text>
            <text class="text-grey">清理缓存</text>
          </view>
          <view class="action">
            <text class="text-grey text-sm">11.08MB</text>
          </view>
        </view> -->

        <!-- 关于我们 -->
        <view class="cu-item">
          <view class="content">
            <text class="cuIcon-settingsfill text-green"></text>
            <text class="text-grey">关于我们</text>
          </view>
        </view>
      </view>
      <button class="cu-btn round bg-red margin-top logout-btn" @click="logout">退出</button>
      <view style="padding-bottom: 80px;"></view>
    </view>
    <!-- 用户信息编辑表单 -->
    <my-userinfo-form v-if="formShow"></my-userinfo-form>

  </view>

</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    name: "my-userinfo",
    data() {
      return {
        formShow: false,
        addressEditShow: false
      };
    },
    computed: {
      ...mapState('m_user', ['userinfo']),
    },
    methods: {
      ...mapMutations('m_user', ['clearAllState']),
      ...mapActions('m_user', ['changeUserAvatar']),
      async logout() {
        const res = await uni.showModal({
          title: '提示',
          content: '确定退出登录吗？'
        });
        if (res.errMsg === "showModal:ok" && res.confirm) {
          uni.clearStorageSync();
          this.clearAllState();
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      },
      gotoMyOrder() {
        this.$parent.$parent.PageCur = 'order'
        console.log(this.$parent.$parent.PageCur);
      },
      editUserInfoShow() {
        this.formShow = true
      },
      editAddress() {
        this.addressEditShow = true
      },
      //客服
      customerService() {
        uni.makePhoneCall({
          // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
          phoneNumber: '15858006899',
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },
          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          }
        });
      },
      goToRunner() {
        uni.navigateTo({
          url: '/pages/authentication/authentication'
        })
      },
      //修改头像
      //点击上传商品图片事件
      changeAvatar() {
        const that = this;
        uni.showActionSheet({
          itemList: ['从相册选择', '拍照'], // 显示的操作列表
          success: function(res) {
            if (!res.cancel) {
              if (res.tapIndex === 0) {
                // 用户选择了从相册选择
                uni.chooseImage({
                  count: 1, //默认9
                  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['album'], //从相册选择
                  success: async (res) => {
                    console.log(res);
                    //上传图片
                    await that.uploadAvatar(res.tempFilePaths[0])
                  }
                });
              } else if (res.tapIndex === 1) {
                // 用户选择了拍照
                uni.chooseImage({
                  count: 1,
                  sourceType: ['camera'], // 拍照
                  success: async function(chooseRes) {
                    await that.uploadAvatar(chooseRes.tempFilePaths[0])
                  }
                });
              }

            }
          }
        });
      },
      //上传图片操作
      async uploadAvatar(filePath) {
        //进行上传图片操作
        const result = await uniCloud.uploadFile({
          filePath: filePath,
          cloudPath: 'user-avatar-new' + this.userinfo.user_phone + '.png',
        });
        console.log(result.fileID);
        const user = this.userinfo;
        user.avatarUrl = result.fileID
        const {
          result: res
        } = await this.changeUserAvatar(user)
        if (res.updated === 1) uni.$showMsg('上传成功')
        console.log(res);
      },
    },

  }
</script>

<style lang="scss">
  .my-top {
    width: 100%;
    height: 200px;
    padding: 50px 20px 30px;
    background-image: url('https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw1.png');
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;


    .my-head-pic {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      box-shadow: 0 1px 5px black;
      margin-right: 20px;
    }

    .my-message {
      width: 100px;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-right: 20px;
    }

    .my-message-edit {
      width: 120px;
    }
  }

  .my-main {
    position: relative;
    width: 90%;
    height: 80px;
    top: -30px;
    left: 0;
    margin: 0 auto;
    background-image: url('https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw1.png');
    border-radius: 20px;
    border: 1px solid silver;
    color: white;
    display: flex;
    justify-content: space-around;

    .my-pic {
      width: 30px;
      height: 30px;
    }

    .my-balance-cash-coupon-authenticate {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .my-order {
    position: relative;
    top: -15px;
  }


  .switch-sex::after {
    content: "\e716";
  }

  .switch-sex::before {
    content: "\e7a9";
  }

  .logout-btn {
    height: 35px;
    width: 90%;
    margin: 20px;
  }
</style>